<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方块收藏家</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏开始界面 -->
        <div id="start-screen" class="screen">
            <h1>方块收藏家</h1>
            <p>点击出现的方块得分</p>
            <p class="high-score">最高分: <span id="high-score">0</span></p>
            <button id="start-btn" class="btn"><i class="fas fa-play"></i> 开始游戏</button>
        </div>

        <!-- 游戏界面 -->
        <div id="game-screen" class="screen hidden">
            <div class="game-header">
                <div class="score">分数: <span id="score">0</span></div>
                <div class="timer">时间: <span id="time">30</span>s</div>
                <button id="pause-btn" class="btn small-btn"><i class="fas fa-pause"></i></button>
            </div>
            <div id="game-area"></div>
        </div>

        <!-- 暂停界面 -->
        <div id="pause-screen" class="screen hidden">
            <h2>游戏暂停</h2>
            <button id="resume-btn" class="btn"><i class="fas fa-play"></i> 继续</button>
            <button id="restart-btn" class="btn"><i class="fas fa-redo"></i> 重新开始</button>
        </div>

        <!-- 结束界面 -->
        <div id="end-screen" class="screen hidden">
            <h2>游戏结束!</h2>
            <p class="final-score">你的得分: <span id="final-score">0</span></p>
            <p class="high-score">最高分: <span id="end-high-score">0</span></p>
            <button id="play-again-btn" class="btn"><i class="fas fa-redo"></i> 再玩一次</button>
        </div>
    </div>

    <!-- uni-app webview 通信脚本 -->
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.4.js"></script>
    <script>
        // 接收来自 uni-app 的消息
        function receiveMessage(data) {
            console.log('收到来自 uni-app 的消息:', data);
            // 可以在这里处理来自 uni-app 的消息
        }

        // 向 uni-app 发送消息
        function sendToUniApp(data) {
            if (typeof uni !== 'undefined') {
                uni.postMessage({ data: data });
            }
        }

        // 游戏事件通知 uni-app
        function notifyGameEvent(event, data) {
            sendToUniApp({
                action: 'gameEvent',
                event: event,
                data: data
            });
        }
    </script>
    <script src="game.js"></script>
</body>
</html>
